<%--
  Created by IntelliJ IDEA.
  User: 曹子阳
  Date: 2021/5/31
  Time: 20:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<br>
<h1 style="text-align: center">标签管理</h1>
<div class="selectPram">
    <p class="layui-anim layui-anim-upbit mc-ui-flex-end" style="text-align:center;
    font-size:18px">
        &nbsp;
    </p>
    <input id="lable" name="lable" class="layui-input layui-anim layui-anim-upbit" type="text" autocomplete="off"
           placeholder="请输入模糊查询标签"/>
    <p class="layui-anim layui-anim-up mc-ui-flex-end" style="text-align:center;
    font-size:18px">
        &nbsp;
    </p>
    <textarea id="textarea" name="textarea" class="layui-textarea layui-anim layui-anim-up" placeholder="请输入模糊查询描述"></textarea>
    <p class="layui-anim layui-anim-up mc-ui-flex-end" style="text-align:center;
    font-size:18px">
        &nbsp;
    </p>
    <a  lay-submit="select" lay-filter="select"  data-type="reload"
       class="layui-btn layui-btn-radius  layui-btn-fluid layui-btn-normal layui-anim layui-anim-scale">查 询</a>
</div>
<br>
<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-icon layui-icon-add-1 layui-btn-primary layui-inline" lay-event="getCheckData"></button>
        <button class="layui-btn layui-btn-primary layui-inline layui-icon layui-icon-edit" lay-event="getCheckLength"></button>
<%--        <button class="layui-btn layui-btn-primary layui-inline layui-icon layui-icon-delete" lay-event="isAll"></button>--%>
    </div>
</script>

<style>
    .layui-table-cell {
        height: 50px;
        line-height: 50px;
    }

    .layui-table-view .layui-form-radio>i {
        margin-top: 25px;
    }
    /*th .layui-table-cell {*/
    /*    height: 30px;*/
    /*    line-height: 30px;*/
    /*}*/
    /*th .laytable-cell-1-0-7 {*/
    /*    height: 30px;*/
    /*    line-height: 30px;*/
    /*}*/
    /*.layui-table img {*/
    /*    width: 100px;*/
    /*    height: 60px;*/
    /*}*/
</style>

<script>
    layui.use(['table','jquery'], function(){
        var table = layui.table,
         $ = layui.jquery;


       let label = table.render({
            elem: '#test'
            ,type: "post"
            ,url:'/label.api/get'
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_TIPS'
                ,icon: 'layui-icon-tips'
            }]
            ,title: '用户数据表'
            ,cols: [[
                {type: 'radio'}
                ,{field:'id', title:'编号', width:80, unresize: true, sort: true}
                ,{field:'name', title:'标签名称', width:120, edit: 'text'}
                ,{field:'describe', title:'描述', width:200, edit: 'text', templet: function(res){
                        return '<b>'+ res.describe +'</b>'
                    }}
                ,{field:'state', title:'状态', width:80, edit: 'text', sort: true, templet:function (reg) {
                    let state =  reg.state == 0 ? "正常" : "隐藏";
                        return '<b>'+ state + '</b>'
                    }}
                   ,{field:'create_date_time', title:'创建时间', width:200,sort: true}
                    ,{title:'操作', width:150,templet:function (reg) {
                        let state =  reg.state == 0 ? "正常" : "隐藏";

                       let html =
                           `<a class="layui-btn layui-btn-xs" lay-event="edit">`+state+`</a>
                         <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>`;
                        return html;
                    }}
            ]]
            ,page: true
            ,limit:10
           ,id:'testReload'
        });

        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    layer.confirm("你点击的是添加标签,确认要添加新的标签吗",{icon: 1},function (i) {
                        layer.close(i);
                        window.location = 'home#/page/addLabel';
                        layer.msg("已跳转添加标签页面")
                    })
                    break;
                case 'getCheckLength':
                    //弹出即全屏
                    if(checkStatus.data.length == 0) {
                        layer.msg("请选中后,进行修改");
                        return;
                    }
                    // 选择的参数
                    var obj = checkStatus.data[0];

                    // 弹出
                    var openIndex = layer.open({
                        type: 1,
                        title:'修改',
                        content: `
                        <p class="layui-anim layui-anim-upbit mc-ui-flex-end" style="text-align:center;
                            font-size:18px">
                            &nbsp;
                        </p>
                        <input updateId="`+obj.id+`" id="lable" value="`+obj.name.trim()+`" name="lable" class="layui-input layui-anim layui-anim-upbit" type="text" autocomplete="off"
                               placeholder="请输入标签名称"/>
                        <p class="layui-anim layui-anim-up mc-ui-flex-end" style="text-align:center;
                            font-size:18px">
                            &nbsp;
                        </p>
                        <textarea  name="textarea" class="layui-textarea layui-anim layui-anim-up" placeholder="一段话描述标签">

                        </textarea>
                        <p class="layui-anim layui-anim-up mc-ui-flex-end" style="text-align:center;
                            font-size:18px">
                            &nbsp;
                        </p>
                        <a lay-submit="update" lay-filter="update" onclick="update()"
                           class="layui-btn layui-btn-radius layui-btn-fluid layui-btn-normal layui-anim layui-anim-scale">提交</a>

                        `,
                        area: ['100%','100%'],
                        maxmin: true
                    });

                    // 赋值描述
                    $('[name=textarea]').val(obj.describe.trim());
                    // layer.alert(JSON.stringify(data));
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });

        var $ = layui.$, active = {
            reload: function(){
                let lable = $('#lable');
                let textarea = $('#textarea');

                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                            name: lable.val(),
                            describe: textarea.val()
                    }
                });
            }
        };

        $('.selectPram .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        window.update = function () {
            layui.use(['jquery'], function () {
                var $ = layui.jquery,
                    lable = $(`input[name='lable']`).val(),
                    textarea = $('textarea').val();

                if (lable == '') {
                    layer.msg('标签不能为空');
                    return false;
                }

                if (textarea == '') {
                    layer.msg('描述不能为空');
                    return false;
                }

                layer.confirm("确认要添加吗",function (index) {
                    layer.close(index);

                    // 所有的文章都可以选中默认标签
                    $.ajax({
                        type:"post",
                        url:"/label.api/update",
                        data:{
                            id:$('#lable').attr("updateId"),
                            name:lable,
                            describe:textarea,
                            state:3
                        },
                        success:function (reg) {
                            layer.closeAll();
                            reg.code == 1 ? layer.msg(reg.msg) : layer.msg(reg.msg,{time:1000},function (reg) {
                                label.reload({
                                    elem: '#test'
                                });
                            });
                        }
                    })
                })
            })
        }

        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index) {
                    obj.del();
                    layer.close(index);
                    $.post("label.api/delete?id=" + data.id, "", function (reg) {
                        reg.code == 1 ? layer.msg(reg.msg) : layer.msg(reg.msg)
                    });
                })
            } else if(obj.event === 'edit'){
                $.post("label.api/update?state=" + data.state+"&id=" + data.id, "", function (reg) {

                    label.reload({
                        elem: '#test'
                    });


                    reg.code == 1 ? layer.msg(reg.msg) : layer.msg(reg.msg)
                });
            }
        });
    });
</script>

</body>
</html>